import { Button, Typography } from "antd";
import Form from "@/components/Form";
import { useRef } from "react";
import type { ProFormInstance } from "@ant-design/pro-components";

export default function Index() {
  const formRef = useRef<ProFormInstance>(null);
  return (
    <>
      <Typography.Title className="text-center">react模版</Typography.Title>
      <div className="w-[800px] mx-[auto]">
        <Form
          grid
          ref={formRef}
          layout="horizontal"
          colProps={{ span: 8 }}
          rowProps={{ gutter: 16 }}
          onFinish={async (values) => {
            console.log(values);
          }}
          columns={[
            {
              name: "username",
              label: "用户名",
              rules: [{ required: true, message: "请输入用户名" }],
              handFormItem: (_, form) => {
                return {
                  fieldProps: {
                    onChange: (e) => {
                      console.log(form);

                      form.setFieldValue("password", e.target.value);
                    }
                  }
                };
              }
            },
            {
              name: "password",
              label: "密码",
              dependencies: ["username"],
              rules: [{ required: true, message: "请输入密码" }]
            }
          ]}
        />
      </div>
      <Button
        onClick={() => {
          console.log(formRef.current);
        }}
      >
        提交
      </Button>
    </>
  );
}
